<template>
  <a-modal
    :width="840"
    :visible="visible"
    title="设置链接地址"
    @ok="handleOk"
    @cancel="onClose"
    :destroyOnClose="true"
  >
    <a-form>
      <a-row>
        <a-col>
          <a-form-item label="链接类型">
            <a-select
              v-model:value="linkType"
              style="width: 200px"
              :options="linkTypeOptions"
            />
          </a-form-item>
        </a-col>
        <a-col>
          <a-alert
            message="非微信环境无法跳转小程序"
            type="info"
            show-icon
            style="padding-top: 4px; padding-bottom: 4px; margin-left: 10px"
            v-if="linkType == 'extra_applet_link'"
          />
        </a-col>
      </a-row>
      <a-divider />
      <!-- 主页面 -->
      <a-row type="flex" v-if="linkType == 'main_link'">
        <a-col flex="1">
          <a-button
            class="button"
            v-for="(item, index) in btnlist"
            :key="index"
            @click="btnClick(index, item)"
            :type="itmeKey == index ? 'primary' : undefined"
          >
            <a-row type="flex">
              <!-- <cu-icon class="icon" :type="item.icon"></cu-icon> -->
              <span> {{ item.name }}</span>
            </a-row>
          </a-button>
        </a-col>
        <a-col>
          <img :src="imgUrl" class="img" />
        </a-col>
      </a-row>
      <!-- 外部链接 -->
      <a-row v-if="linkType == 'third_link'">
        <a-form-item label="跳转链接" v-bind="validateInfos.link">
          <a-input
            style="width: 400px"
            v-model:value="modelRef.link"
            placeholder="请输入跳转链接"
          />
        </a-form-item>
      </a-row>
    </a-form>
    <!-- 资讯页面 -->
    <a-row
      v-if="
        linkType == 'info_link' ||
        linkType == 'activity_link' ||
        linkType == 'forum_link'
      "
    >
      <a-tabs v-model:activeKey="activeKey" tab-position="left">
        <a-tab-pane
          v-for="active in activeKeyList"
          :key="active.key"
          :tab="active.title"
        />
      </a-tabs>
      <a-table
        style="flex: 1"
        :dataSource="dataSource"
        :columns="columns"
        :row-selection="{
          selectedRowKeys: selectedRowKeys,
          onChange: onSelectChange,
          type: 'radio',
        }"
        :loading="loading"
        :pagination="activeKey == 0 ? false : pagination"
        @change="handleTableChange"
        rowKey="id"
        :scroll="{ y: 325 }"
      >
        <template #bodyCell="{ text, record, index, column }">
          <template v-if="column.key === 'preview'">
            <a-button type="link" @click="previewClick(record.pc_link)"
              >点击预览</a-button
            >
          </template>
          <template v-if="column.key === 'pageName'">
            <span>{{ pageName }}</span>
          </template>
          <template v-if="column.key === 'village_name'">
            <span v-if="record.village_name">
              {{ record.village_name.join(",") }}
            </span>
          </template>
        </template>

        <!-- 搜索 -->
        <template
          #customFilterDropdown="{
            setSelectedKeys,
            selectedKeys,
            confirm,
            clearFilters,
            column,
          }"
        >
          <div style="padding: 8px">
            <a-input
              ref="searchInput"
              :placeholder="`搜索 ${column.title}`"
              :value="selectedKeys[0]"
              style="width: 188px; margin-bottom: 8px; display: block"
              @change="
                (e) => setSelectedKeys(e.target.value ? [e.target.value] : [])
              "
              @pressEnter="handleSearch(selectedKeys, confirm, column.key)"
            />
            <a-button
              type="primary"
              size="small"
              style="width: 90px; margin-right: 8px"
              @click="handleSearch(selectedKeys, confirm, column.key)"
            >
              搜索
            </a-button>
            <a-button
              size="small"
              style="width: 90px"
              @click="handleReset(clearFilters, column.key)"
            >
              重置
            </a-button>
          </div>
        </template>
        <template #customFilterIcon="filtered">
          <SearchOutlined
            :style="{ color: filtered ? '#108ee9' : undefined }"
          />
        </template>
      </a-table>
    </a-row>

    <!-- 预览 -->
    <a-modal
      width="1400px"
      v-model:visible="qrcodeVisible"
      title="预览"
      :destroyOnClose="true"
      :footer="null"
    >
      <a-row justify="center">
        <a-col>
          <iframe
            ref="iframeRef"
            :src="pageIframeUrl"
            class="iframe"
            frameborder="no"
            border="0"
            marginWidth="0"
            marginHeight="0"
        /></a-col>
      </a-row>
    </a-modal>
  </a-modal>
</template>

<script>
import {
  defineComponent,
  reactive,
  toRefs,
  createVNode,
  computed,
  watch,
  ref,
  nextTick,
} from "vue";
import { Form, message } from "ant-design-vue";
import request from "../../../../common/utils/request";
import utils from "../../../../common/utils/utils";
import defaultSetting from "../../../../common/utils/defaultSetting";
import store from "../../../../store";
import { SearchOutlined } from "@ant-design/icons-vue";
const useForm = Form.useForm;
export default defineComponent({
  name: "LinkLibrary",
  emits: ["success", "close"],
  components: { SearchOutlined },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    id: {
      type: [Number, String],
      default: 0,
    },
    linkData: {
      type: Object,
      default: () => {
        return {};
      },
    },
    scene: {
      type: String,
      default: "",
    },
  },
  setup(props, { emit }) {
    const radioStyle = reactive({
      display: "block",
      height: "30px",
      lineHeight: "30px",
    });

    const state = reactive({
      linkType: "main_link",
      // 主页面
      linkTypeOptions: [],
      btnlist: [],
      //   资讯页面
      itmeKey: 0,
      activeKeyList: [],
      activeKey: 0,
      dataSource: [],
      selectedRowKeys: [],
      page: 1,
      pageSize: 10,
      total: 0,
      pageName: "资讯列表",
      loading: false,
      cat_id: 0,
      iframeUrl: "",
      qrcodeVisible: false,
      pageIframeUrl: "",
      linkLibraryData: {},
      staticPathList: [
        {
          url: utils.staticPath + "images/cu_page/index.png",
          name: "首页",
        },
        {
          url: utils.staticPath + "images/cu_page/build_message.png",
          name: "租客资讯",
        },
        {
          url: utils.staticPath + "images/cu_page/four_build.png",
          name: "优选好房",
        },
        {
          url: utils.staticPath + "images/cu_page/four_build.png",
          name: "找楼盘",
        },
        {
          url: utils.staticPath + "images/cu_page/four_build.png",
          name: "联合办公",
        },
        {
          url: utils.staticPath + "images/cu_page/four_build.png",
          name: "租商铺",
        },
        {
          url: utils.staticPath + "images/cu_page/contracts_hunting.png",
          name: "委托找房",
        },
        {
          url: utils.staticPath + "images/cu_page/recruit_shang.png",
          name: "招商加盟",
        },
        {
          url: utils.staticPath + "images/cu_page/recruitment.png",
          name: "人才招聘",
        },
        {
          url: utils.staticPath + "images/cu_page/activity.png",
          name: "活动中心",
        },
        {
          url: utils.staticPath + "images/cu_page/forum.png",
          name: "租客论坛",
        },
      ],
      imgUrl: "",
      columns: [],

      miniListVisible: false,
      currentWechatMini: {},
      wechatMiniOpenType: "navigate",

      filters: {}, //筛选项
    });

    const modelRef = reactive({
      link: "",
    });
    const rulesRef = ref({});

    const { resetFields, validate, validateInfos } = useForm(
      modelRef,
      rulesRef
    );

    // 链接类型切换
    watch(
      () => state.linkType,
      (val) => {
        state.page = 1;
        state.pageSize = 10;
        rulesRef.value = {};
        state.linkLibraryData = {};
        state.activeKey = 0;
        if (val == "third_link") {
          rulesRef.value = {
            link: [
              {
                required: true,
                message: "请输入链接地址",
              },
            ],
          };
        }
        if (!modelRef.link) {
          resetFields();
        }
        if (val == "main_link") {
          state.itmeKey = 0;
          state.linkLibraryData = state.btnlist[0];
          state.imgUrl = state.btnlist[0].url;
        }
        switch (val) {
          // 资讯页面
          case "info_link":
            catList();
            break;
        }
      }
    );

    const btnClick = (index, item) => {
      state.itmeKey = index;
      state.imgUrl = state.staticPathList.find(
        (items) => items.name == item.name
      ).url;
      item.url = state.imgUrl;
      state.linkLibraryData = item;
      console.log(state.linkLibraryData, "state.linkLibraryData");
    };

    // 资讯页面切换
    watch(
      () => state.activeKey,
      (val) => {
        state.selectedRowKeys = [];
        state.loading = true;
        state.cat_id = val;
        state.page = 1;
        state.pageSize = 10;
        if (!props.visible) {
          return;
        }
        // 资讯
        if (state.linkType == "info_link") {
          if (val == 0) {
            state.columns = [
              {
                title: "选择资讯分类",
                dataIndex: "cat_name",
              },
              {
                title: "页面名称",
                align: "center",
                dataIndex: "pageName",
                key: "pageName",
                width: 120,
              },
              {
                title: "预览",
                align: "center",
                dataIndex: "preview",
                key: "preview",
              },
            ];
            state.pageName = "资讯列表";
            catList();
          } else {
            noticeList(val);
            state.columns = [
              {
                title: "选择资讯名称",
                dataIndex: "title",
              },
              {
                title: "页面名称",
                align: "center",
                width: 120,
                dataIndex: "pageName",
                key: "pageName",
              },
              {
                title: "预览",
                align: "center",
                dataIndex: "preview",
                key: "preview",
              },
            ];
            state.pageName = "资讯详情";
          }
          return;
        }
        // 活动列表
        if (state.linkType == "activity_link") {
          if (val == 0) {
            state.columns = [
              {
                title: "筛选的项目",
                dataIndex: "name",
              },
              {
                title: "页面名称",
                align: "center",
                dataIndex: "pageName",
                key: "pageName",
                width: 120,
              },
              {
                title: "预览",
                align: "center",
                dataIndex: "preview",
                key: "preview",
              },
            ];
            state.pageName = "活动列表";
            activityList();
          }
        }
        // 租客论坛
        if (state.linkType == "forum_link") {
          if (val == 0) {
            state.columns = [
              {
                title: "选择话题",
                dataIndex: "cat_name",
              },
              {
                title: "页面名称",
                align: "center",
                dataIndex: "pageName",
                key: "pageName",
                width: 120,
              },
              {
                title: "预览",
                align: "center",
                dataIndex: "preview",
                key: "preview",
              },
            ];
            state.pageName = "帖子列表";
            getForumCat();
          } else {
            getForumList(val);
            state.columns = [
              {
                title: "选择帖子名称",
                dataIndex: "title",
                key: "title",
                ellipsis: true,
                customFilterDropdown: true,
              },
              {
                title: "发布人名称",
                dataIndex: "cuser_uname",
                key: "cuser_uname",
                customFilterDropdown: true,
              },
              {
                title: "页面名称",
                align: "center",
                width: 120,
                dataIndex: "pageName",
                key: "pageName",
              },
              {
                title: "预览",
                align: "center",
                dataIndex: "preview",
                key: "preview",
              },
            ];
            state.pageName = "帖子详情";
          }
          return;
        }
      }
    );
    // table选择
    const onSelectChange = (selectedRowKeys) => {
      console.log("selectedRowKeys changed: ", selectedRowKeys);
      state.selectedRowKeys = selectedRowKeys;
      if (state.linkType == "cu_page_link") {
        console.log("///");
        let domain = `${
          utils.isEnv() ? "http://localhost:8081" : defaultSetting.requestDomain
        }`;
        let link = `${domain}/h5/pages/cuPage/preview?id=${selectedRowKeys[0]}`;
        state.pageIframeUrl = link;
      }
    };
    const catList = () => {
      state.loading = true;
      request
        .get("/work_notice", "/owner/notice/catList", {
          org_id: store.getters.userInfo.org_id,
          notice_show_index: true,
          source: "pc",
        })
        .then((res) => {
          state.activeKeyList = res.list.map((item, index) => {
            // if (props.linkData.linkType !== "info_link") {
            //   if (index == 0) {
            //     state.activeKey = item.id;
            //     noticeList(item.id);
            //   }
            // }
            return {
              title: item.cat_name,
              key: item.id,
              id: item.id,
            };
          });
          state.activeKeyList.unshift({
            title: "资讯列表",
            key: 0,
          });
          state.dataSource = res.list;
          state.columns = [];
          state.columns = [
            {
              title: "选择资讯分类",
              dataIndex: "cat_name",
            },
            {
              title: "页面名称",
              align: "center",
              dataIndex: "pageName",
              key: "pageName",
              width: 120,
            },
            {
              title: "预览",
              align: "center",
              dataIndex: "preview",
              key: "preview",
            },
          ];
          state.loading = false;
        });
    };

    const noticeList = (cat_id = "") => {
      request
        .get("/work_notice", "/owner/noticeList", {
          cat_id,
          source: "pc",
          notice_show_index: true,
          status: 1,
          page: state.page,
          pageSize: state.pageSize,
          org_id: store.getters.userInfo.org_id,
          village_ids: store.getters.buildingInfo.permissionBuildings
            .map((item) => item.id)
            .join("-"),
        })
        .then((res) => {
          state.dataSource = res.list;
          state.total = res.total;
          state.loading = false;
          if (props.linkData.activeKey) {
            state.selectedRowKeys = props.linkData.selectedRowKeys;
          }
        });
    };
    // 活动列表
    const activityList = () => {
      request
        .get("/work_notice", "/activity/villageList", {
          page: state.page,
          pageSize: state.pageSize,
          org_id: store.getters.userInfo.org_id,
          village_id: store.getters.buildingInfo.permissionBuildings
            .map((item) => item.id)
            .join("-"),
        })
        .then((res) => {
          state.dataSource = res.list;
          state.columns = [
            {
              title: "筛选的项目",
              dataIndex: "name",
            },
            {
              title: "页面名称",
              align: "center",
              dataIndex: "pageName",
              key: "pageName",
              width: 120,
            },
            {
              title: "预览",
              align: "center",
              dataIndex: "preview",
              key: "preview",
            },
          ];
          state.loading = false;
        });
    };
    const activity = (type) => {
      let params = {};
      params.page = state.page;
      params.pageSize = state.pageSize;
      params.org_id = store.getters.userInfo.org_id;
      params.village_id = store.getters.buildingInfo.permissionBuildings
        .map((item) => item.id)
        .join("-");
      if (type) {
        params.type = type;
      }
      request.get("/work_notice", "/activity", params).then((res) => {
        state.columns = [
          {
            title: "选择活动名称",
            dataIndex: "title",
          },
          {
            title: "所属项目",
            dataIndex: "village_name",
            key: "village_name",
          },
          {
            title: "页面名称",
            align: "center",
            dataIndex: "pageName",
            key: "pageName",
            width: 120,
          },
          {
            title: "预览",
            align: "center",
            dataIndex: "preview",
            key: "preview",
          },
        ];
        state.dataSource = res.list;
        state.total = res.total;
        state.loading = false;
      });
    };

    const pagination = computed(() => ({
      total: state.total,
      current: state.page,
      pageSize: state.pageSize,
      showSizeChanger: true,
    }));

    const handleTableChange = (pager, filters, sorter) => {
      state.page = pager.current;
      state.pageSize = pager.pageSize;
      state.loading = true;
      console.log(state.linkType, "state.linkType");
      if (state.linkType == "info_link") {
        noticeList(state.cat_id);
        return;
      }
      if (state.linkType == "activity_link") {
        activity(state.activeKey);
      }
      if (state.linkType == "cu_page_link") {
        getCuPageList();
      }
      if (state.linkType == "forum_link") {
        if (filters) {
          for (let key in filters) {
            if (filters[key] && filters[key].length > 0) {
              filters[key] = filters[key][0];
            }
            if (filters[key] && filters[key].length == 0) {
              delete filters[key];
            }
          }
          state.filters = filters;
        }
        getForumList(state.cat_id);
        return;
      }
    };

    const previewClick = (item) => {
      console.log(item, "item");
      state.qrcodeVisible = true;
      // let url = `${
      //   utils.isEnv() ? "http://localhost:8081" : defaultSetting.requestDomain
      // }`;
      // let link =
      //   url +
      //   "/h5" +
      //   item.split("h5")[1] +
      //   `&org_id=${store.getters.userInfo.org_id}` +
      //   "&isPreview=1";
      state.pageIframeUrl = `${item}?&org_id=${store.getters.userInfo.org_id}`;
      console.log(link, "link");
    };

    // 链接类型
    const skipLinkTypeList = () => {
      request
        .get("/work_cu_page", "/system/skipLinkTypeList", { source: "pc" })
        .then((res) => {
          state.linkTypeOptions = res.initData.skipLinkType.map(
            (item, index) => {
              return {
                value: item.key,
                label: item.name,
              };
            }
          );
        });

      request
        .post("/public", "/linkLibrary/cuPage/showLinkList", {
          source: "pc",
        })
        .then((res) => {
          state.btnlist = res.list;
          state.imgUrl = state.staticPathList.find(
            (items) => items.name == res.list[0].name
          ).url;
          state.linkLibraryData = res.list[0];
          if (state.imgUrl) {
            state.btnlist[0].url = state.imgUrl;
          }
          if (state.btnlist.length && Object.keys(props.linkData).length) {
            state.itmeKey = state.btnlist.findIndex(
              (item) => item.link == props.linkData.link
            );
            state.imgUrl = utils.urlReg.test(props.linkData.url)
              ? props.linkData.url
              : utils.staticPath + props.linkData.url;
            state.linkLibraryData = props.linkData;
          }
        });
    };

    const handleOk = () => {
      validate().then(() => {
        if (state.linkType == "third_link") {
          state.linkLibraryData.link = modelRef.link;
          state.linkLibraryData.name = "外部链接";
        }
        if (state.linkType == "info_link") {
          if (!state.selectedRowKeys.length) {
            message.warn("请选择资讯");
            return;
          }
          let data = state.dataSource.find(
            (item) => item.id == state.selectedRowKeys
          ).pc_link;
          console.log(data, "xxxxxxxxxxxxxxxx");
          // state.linkLibraryData.link =
          //   data.split("/h5")[1] +
          //   `&org_id=${store.getters.userInfo.org_id}`;
          state.linkLibraryData.link =
            data + `&org_id=${store.getters.userInfo.org_id}`;
          state.linkLibraryData.name = "资讯页面";
          state.linkLibraryData.activeKey = state.activeKey;
          state.linkLibraryData.selectedRowKeys = state.selectedRowKeys;
          // if (state.linkLibraryData.link.indexOf("noticeList") !== -1) {
          //   state.linkLibraryData.alias = `tenantInformation?${
          //     data.split("?")[1]
          //   }`;
          // }
          // if (state.linkLibraryData.link.indexOf("noticeDetail") !== -1) {
          //   state.linkLibraryData.alias = `ownerNoticeDetail?${
          //     data.split("?")[1]
          //   }`;
          // }
        }

        state.linkLibraryData.linkType = state.linkType;

        console.log(state.linkLibraryData);
        emit("success", state.linkLibraryData);
      });
    };

    const onClose = () => {
      resetFields();
      emit("close");
    };

    const init = () => {
      skipLinkTypeList();
      if (Object.keys(props.linkData).length) {
        state.linkType = props.linkData.linkType;
        state.linkLibraryData = props.linkData;
        setTimeout(() => {
          if (props.linkData.linkType == "third_link") {
            modelRef.link = props.linkData.link;
          }
          if (props.linkData.activeKey) {
            state.activeKey = props.linkData.activeKey;
          }
          if (props.linkData.selectedRowKeys) {
            nextTick(() => {
              state.selectedRowKeys = props.linkData.selectedRowKeys;
            });
          }
          if (props.linkData.linkType == "extra_applet_link") {
            let data = JSON.parse(JSON.stringify(props.linkData));
            data.title = data.name;
            state.currentWechatMini = data;
            state.wechatMiniOpenType = data.openType;
          }
        }, 10);
      }
    };

    watch(
      () => props.visible,
      (val) => {
        if (val) {
          state.linkType = "main_link";
          state.itmeKey = 0;
          init();
        } else {
          state.activeKey = 0;
          modelRef.link = "";
          state.selectedRowKeys = [];
          state.currentWechatMini = {};
          state.wechatMiniOpenType = "navigate";
        }
      }
    );

    // 活动列表
    const getCuPageList = () => {
      request
        .get("/work_cu_page", "/cupage/templateList", {
          page: state.page,
          limit: state.pageSize,
        })
        .then((res) => {
          state.dataSource = res.list;
          state.loading = false;
          state.columns = [
            {
              title: "页面名称",
              dataIndex: "title",
            },
            {
              title: "最近修改时间",
              dataIndex: "last_time",
              key: "last_time",
            },
          ];
          // 默认选择第一个
          if (res.list.length > 0 && state.selectedRowKeys.length == 0) {
            state.selectedRowKeys = [res.list[0].id];
            if (state.linkType == "cu_page_link") {
              let domain = `${
                utils.isEnv()
                  ? "http://localhost:8081"
                  : defaultSetting.requestDomain
              }`;
              let link = `${domain}/h5/pages/cuPage/preview?id=${state.selectedRowKeys[0]}&org_id=${store.getters.userInfo.org_id}`;
              state.pageIframeUrl = link;
            }
          }
        });
    };

    const showMiniList = () => {
      state.miniListVisible = true;
    };

    // 小程序列表 关闭
    const miniListClose = () => {
      state.miniListVisible = false;
    };

    const miniListSuccess = (data) => {
      miniListClose();
      if (data && data.id) {
        state.currentWechatMini = data;
        state.selectedRowKeys = [data.id];
      }
    };

    const getForumCat = () => {
      state.loading = true;
      request
        .get("/work_notice", "/forum/subjectList", {
          org_id: store.getters.userInfo.org_id,
        })
        .then((res) => {
          state.activeKeyList = res.list.map((item, index) => {
            return {
              title: item.name,
              key: item.id,
              id: item.id,
            };
          });
          state.activeKeyList.unshift({
            title: "帖子列表",
            key: 0,
          });
          state.dataSource = res.list;
          state.columns = [];
          state.columns = [
            {
              title: "选择话题",
              dataIndex: "name",
            },
            {
              title: "页面名称",
              align: "center",
              dataIndex: "pageName",
              key: "pageName",
              width: 120,
            },
            {
              title: "预览",
              align: "center",
              dataIndex: "preview",
              key: "preview",
            },
          ];
          state.loading = false;
        });
    };
    const getForumList = (sub_id) => {
      let params = {
        sub_id,
        status: 1,
        page: state.page,
        pageSize: state.pageSize,
        org_id: store.getters.userInfo.org_id,
      };
      if (state.filters) {
        for (let key in state.filters) {
          params[key] = state.filters[key];
          console.log(params[key]);
        }
      }
      request.get("/work_notice", "/forumList", { ...params }).then((res) => {
        state.dataSource = res.list;
        state.total = res.total;
        state.loading = false;
        if (props.linkData.activeKey) {
          state.selectedRowKeys = props.linkData.selectedRowKeys;
        }
      });
    };

    const handleSearch = (selectedKeys, confirm, searchKey) => {
      console.log(selectedKeys);
      confirm();
    };

    const handleReset = (clearFilters, searchKey) => {
      clearFilters();
    };

    return {
      ...toRefs(state),
      onClose,
      handleOk,
      modelRef,
      validateInfos,
      btnClick,
      onSelectChange,
      previewClick,
      pagination,
      handleTableChange,
      radioStyle,
      showMiniList,
      miniListClose,
      miniListSuccess,
      handleSearch,
      handleReset,
    };
  },
});
</script>

<style lang="less" scoped>
:deep(.ant-modal-body) {
  padding-bottom: 0px;
}
.ant-divider-horizontal {
  margin-bottom: 20px !important;
  margin-top: 0px;
}
.button {
  margin-right: 15px;
  margin-bottom: 10px;
}

.iframe {
  width: 1200px;
  height: 800px;
  margin-bottom: 10px;
  pointer-events: none;
}
.img {
  width: 420px;
  height: 385px;
  margin-bottom: 10px;
  pointer-events: none;
  object-fit: contain;
}
.icon {
  font-size: 22px;
  padding-right: 5px;
}

.mini-card {
  width: 300px;
  margin-top: 20px;
  border-radius: 4px;

  :deep(.ant-card-body) {
    padding: 15px 20px;
  }

  .mini-card-line {
    display: flex;
    align-items: center;
    margin-bottom: 10px;

    .mini-card-icon {
      color: @primary-color;
      font-size: 24px;
    }

    .mini-card-title {
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      margin-left: 10px;
      font-weight: bold;
      font-size: 16px;
    }
  }

  .mini-card-desc {
    color: #666;
    margin-top: 5px;

    .mini-card-label {
      display: inline-block;
      min-width: 40px;
      text-align: right;
    }
  }
}
</style>
